import React from 'react';

const Assessment: React.FC = () => {
  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-800">考核管理</h1>
        <p className="text-gray-600 mt-2">员工绩效考核与评估管理</p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {/* 考核统计卡片 */}
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">待考核</p>
              <p className="text-2xl font-bold text-gray-800">12</p>
            </div>
            <div className="p-3 bg-blue-100 rounded-full">
              <i className="fa fa-clock text-blue-600 text-xl"></i>
            </div>
          </div>
        </div>
        
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">已完成</p>
              <p className="text-2xl font-bold text-green-600">45</p>
            </div>
            <div className="p-3 bg-green-100 rounded-full">
              <i className="fa fa-check-circle text-green-600 text-xl"></i>
            </div>
          </div>
        </div>
        
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">平均分</p>
              <p className="text-2xl font-bold text-purple-600">86.5</p>
            </div>
            <div className="p-3 bg-purple-100 rounded-full">
              <i className="fa fa-chart-line text-purple-600 text-xl"></i>
            </div>
          </div>
        </div>
        
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">考核周期</p>
              <p className="text-2xl font-bold text-orange-600">Q1</p>
            </div>
            <div className="p-3 bg-orange-100 rounded-full">
              <i className="fa fa-calendar text-orange-600 text-xl"></i>
            </div>
          </div>
        </div>
      </div>
      
      {/* 考核周期筛选 */}
      <div className="mt-8 bg-white rounded-lg shadow">
        <div className="p-6 border-b">
          <div className="flex justify-between items-center">
            <h2 className="text-lg font-semibold text-gray-800">考核记录</h2>
            <div className="flex space-x-2">
              <button className="px-3 py-1 text-sm bg-blue-100 text-blue-600 rounded-lg">全部</button>
              <button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">本月</button>
              <button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">本季度</button>
              <button className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">历史记录</button>
            </div>
          </div>
        </div>
        <div className="p-6">
          {/* 当月未考核提示 */}
          <div className="mb-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <div className="flex items-start space-x-3">
              <i className="fa-solid fa-exclamation-triangle text-yellow-500 mt-1"></i>
              <div>
                <h4 className="font-medium text-yellow-800 mb-1">2024年2月绩效考核尚未进行</h4>
                <p className="text-sm text-yellow-700">
                  当前月份的绩效考核尚未开始或正在进行中。您可以在考核开始后查看详细评分。
                </p>
                <div className="mt-3 flex space-x-2">
                  <button className="px-3 py-1 bg-yellow-500 hover:bg-yellow-600 text-white text-xs rounded">
                    开始考核
                  </button>
                  <button className="px-3 py-1 border border-yellow-300 text-yellow-700 hover:bg-yellow-100 text-xs rounded">
                    设置提醒
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-50">
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">员工姓名</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">部门</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">考核周期</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">自动评分</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">KPI得分</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">能力评估</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">总分</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">状态</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-600">操作</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200">
                <tr>
                  <td className="px-4 py-3 text-sm text-gray-800">张三</td>
                  <td className="px-4 py-3 text-sm text-gray-600">开发部</td>
                  <td className="px-4 py-3 text-sm text-gray-600">2024-Q1</td>
                  <td className="px-4 py-3 text-sm font-semibold text-green-600">87.2</td>
                  <td className="px-4 py-3 text-sm text-gray-600">88</td>
                  <td className="px-4 py-3 text-sm text-gray-600">85</td>
                  <td className="px-4 py-3 text-sm font-semibold text-blue-600">86.5</td>
                  <td className="px-4 py-3">
                    <span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">已完成</span>
                  </td>
                  <td className="px-4 py-3">
                    <button className="text-blue-600 hover:text-blue-800 text-sm">查看详情</button>
                  </td>
                </tr>
                <tr>
                  <td className="px-4 py-3 text-sm text-gray-800">李四</td>
                  <td className="px-4 py-3 text-sm text-gray-600">产品部</td>
                  <td className="px-4 py-3 text-sm text-gray-600">2024-Q1</td>
                  <td className="px-4 py-3 text-sm font-semibold text-green-600">89.5</td>
                  <td className="px-4 py-3 text-sm text-gray-600">92</td>
                  <td className="px-4 py-3 text-sm text-gray-600">88</td>
                  <td className="px-4 py-3 text-sm font-semibold text-blue-600">90</td>
                  <td className="px-4 py-3">
                    <span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">已完成</span>
                  </td>
                  <td className="px-4 py-3">
                    <button className="text-blue-600 hover:text-blue-800 text-sm">查看详情</button>
                  </td>
                </tr>
                <tr>
                  <td className="px-4 py-3 text-sm text-gray-800">王五</td>
                  <td className="px-4 py-3 text-sm text-gray-600">测试部</td>
                  <td className="px-4 py-3 text-sm text-gray-600">2024-Q1</td>
                  <td className="px-4 py-3 text-sm font-semibold text-blue-600">84.3</td>
                  <td className="px-4 py-3 text-sm text-gray-600">85</td>
                  <td className="px-4 py-3 text-sm text-gray-600">82</td>
                  <td className="px-4 py-3 text-sm font-semibold text-blue-600">83.5</td>
                  <td className="px-4 py-3">
                    <span className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">进行中</span>
                  </td>
                  <td className="px-4 py-3">
                    <button className="text-blue-600 hover:text-blue-800 text-sm">继续考核</button>
                  </td>
                </tr>
                {/* 历史考核记录 */}
                <tr>
                  <td className="px-4 py-3 text-sm text-gray-800">张三</td>
                  <td className="px-4 py-3 text-sm text-gray-600">开发部</td>
                  <td className="px-4 py-3 text-sm text-gray-600">2023-Q4</td>
                  <td className="px-4 py-3 text-sm font-semibold text-green-600">88.7</td>
                  <td className="px-4 py-3 text-sm text-gray-600">89</td>
                  <td className="px-4 py-3 text-sm text-gray-600">87</td>
                  <td className="px-4 py-3 text-sm font-semibold text-blue-600">88</td>
                  <td className="px-4 py-3">
                    <span className="px-2 py-1 text-xs bg-gray-100 text-gray-800 rounded-full">历史记录</span>
                  </td>
                  <td className="px-4 py-3">
                    <button className="text-blue-600 hover:text-blue-800 text-sm">查看详情</button>
                  </td>
                </tr>
                <tr>
                  <td className="px-4 py-3 text-sm text-gray-800">李四</td>
                  <td className="px-4 py-3 text-sm text-gray-600">产品部</td>
                  <td className="px-4 py-3 text-sm text-gray-600">2023-Q4</td>
                  <td className="px-4 py-3 text-sm font-semibold text-green-600">90.2</td>
                  <td className="px-4 py-3 text-sm text-gray-600">91</td>
                  <td className="px-4 py-3 text-sm text-gray-600">89</td>
                  <td className="px-4 py-3 text-sm font-semibold text-blue-600">90</td>
                  <td className="px-4 py-3">
                    <span className="px-2 py-1 text-xs bg-gray-100 text-gray-800 rounded-full">历史记录</span>
                  </td>
                  <td className="px-4 py-3">
                    <button className="text-blue-600 hover:text-blue-800 text-sm">查看详情</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Assessment;